<!--  -->
<template>
  <div>
        <el-button type="primary" @click="add">新增</el-button>
        <el-button type="primary" @click="del">删除</el-button>
        <el-button type="primary" @click="hy">还原</el-button>
        <!-- <el-button type="primary" @click="imp">导入</el-button>
        <el-button type="primary" @click="exp">导出</el-button> -->
        <el-button type="primary" @click="dy">打印</el-button>
        <el-divider></el-divider>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="变更编号">
            <el-input v-model="formInline.id" placeholder="变更编号"></el-input>
        </el-form-item>
        <el-form-item label="审批状态">
            <el-select v-model="formInline.approve_status" clearable  placeholder="全部">
                <el-option label="审批通过" value="3"></el-option>
                <el-option label="审批不通过" value="2"></el-option>
                <el-option label="审批中" value="1"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="getData">查询</el-button>
        </el-form-item>
        </el-form>
        <el-table border :summary-method="getSummaries" show-summary ref="multipleTable" :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" tooltip-effect="dark" style="width: 100%"  @selection-change="handleSelectionChange">
            <el-table-column type="selection"  width="55"> </el-table-column>
            <el-table-column label="序号" type="index" width="120"> </el-table-column>
            <el-table-column prop="id" label="变更编号" width="120">
                 <template slot-scope="scope">
                    <el-link type="primary" @click="ck(scope.row)">{{scope.row.id}}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="modifyName" label="设计变更名称" width="120"> </el-table-column>
            <el-table-column prop="user_realname" label="填报人"> </el-table-column>
            <el-table-column prop="update_date" label="日期" width="120"> </el-table-column>
            <el-table-column prop="project_name" label="项目名称" width="120"> </el-table-column>
            <el-table-column prop="project_name" label="所属合同" width="120"> </el-table-column>
            <el-table-column prop="modify_apply_company" label="提出变更单位" width="120"> </el-table-column>
            <el-table-column prop="modify_content" label="变更内容" width="120"> </el-table-column>
            <el-table-column prop="modify_amount" label="变更金额" width="120"> </el-table-column>
            <el-table-column label="审批状态" width="120">
                <template slot-scope="scope">
                   <span style="color: orange;font-weight: 700" v-if="scope.row.approve_status=='1'">审批中</span>
                    <span style="color: red;font-weight: 700" v-if="scope.row.approve_status=='2'">审批不通过</span>
                    <span style="color: green;font-weight: 700" v-if="scope.row.approve_status=='3'">审批通过</span>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 40]" 
            :page-size="pagesize"         
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length">    //这是显示总共有多少数据，
        </el-pagination>
  </div>
</template>

<script>
import DesignModifyModel from '../../../model/nyx/DesignModifyModel'
var dm=new DesignModifyModel();
export default {
    inject: ['reload'],
    data () {
        return {
            currentPage:1, //初始页
            pagesize:5,    //    每页的数据
            formInline:{},
            tableData:[],
            multipleSelection:[]
        };
    },

    components: {},

    computed: {},

    mounted(){
        this.getData();
    },

    methods: {
        // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange: function (size) {
                this.pagesize = size;
                console.log(this.pagesize)  //每页下拉显示数据
        },
        handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;
                console.log(this.currentPage)  //点击第几页
        },
        handleSelectionChange(val) {
            this.multipleSelection=[];
            for(var i=0;i<val.length;i++){
                this.multipleSelection.push(val[i].id)
            }
        },
        add(){
            this.$router.push({
                name:'DesignModify',
            })
        },
        hy(){
            this.reload()
        },
        del(){
            if(this.multipleSelection.length==0){
                alert("请选择")
                return
            }
            dm.del(this.multipleSelection.join(",")).then(()=>{
                this.getData();
            })
        },
        imp(){

        },
        exp(){

        },
        dy(){
            window.print();
            console.log(123);
        },
        getData(){
            dm.getData(this.formInline).then(Response=>{
                this.tableData=Response.data.data
            })
        },
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '总价';
                    return;
                }
                if (index === 10) {
                    const values = data.map(item => Number(item[column.property]));
                    if (!values.every(value => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                        const value = Number(curr);
                        if (!isNaN(value)) {
                            return prev + curr;
                        } else {
                            return prev;
                        }
                        }, 0);
                        sums[index] += ' 元';
                    } else {
                        sums[index] = 'N/A';
                    }
                
                }
            });
            return sums;
        },
        ck(row){
            this.$router.push({
                name:'DesignModify',
                params:{
                    row:row,
                }
            })
        }

    }
}

</script>
<style scoped>
</style>